<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
        <template slot="table-action">
          <el-button type="info" @click="add">新增</el-button>
       </template>
    </table-ext>
    <el-dialog :visible.sync="editor.sync" :fullscreen="true" title="模板编辑" @close="editorClose">
      <div><el-input v-model="template.name" placeholder="请输入模板名称"></el-input></div>
      <contract-editor ref="editor" :elList="template.elementList" :templateContent="template.templateContent"></contract-editor>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editorClose">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
     </span>
    </el-dialog>
    <el-dialog :visible.sync="viewer.sync" :fullscreen="true" title="模板查看" @close="viewerClose">
      <contract-viewer :content="template.templateContent" :elList="template.elementList">
      </contract-viewer>
    </el-dialog>
  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import TableIcon from '@/components/common/table-ext/table-icon';
  import ContractEditor from '@/components/common/contract/contract3';
  import ContractViewer from '@/components/common/contract/contractShow';
   export default {
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt,
      ContractEditor,
      ContractViewer
    },
    data() {
      return {
        template:{
          id: '',
          name: '',
          templateContent: '',
          elementList: []
        },
        editor: {
          sync: false,
          id: ''
        },
        viewer: {
          sync: false
        },
        config:{ // 页面共通配置
          title: '合同模板', //页面标题
          isPage: true, //是否分页
          isNo: true, //是否显示序号
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.contract + '/contractmgt/template/query'
            }
          }
        },
        // 查询表单配置
        searchForm:[{
          label: '模板名称', 
          key: 'name', 
          type: 'input' 
        }
        ],
        // 表格列定义
        columns:[{
          label: 'id',
          key: 'id',
          hidden: true
        },{
          label: '操作',
          key: 'opt',
          align: 'center',
          render:(h, ctx)=>{ //动态渲染, 字典表示例
            let _this = this;
            return h('div',{},[
              h('el-button',{
                props: {
                  type: 'text'
                },
                on: {
                  click(){
                    _this.edit(ctx.row.id)
                  }
                }}, '编辑'),              
              h('el-button',{
                props: {
                  type: 'text'
                },
                on: {
                  click(){
                    _this.disableTemplate(ctx.row.id,ctx.row.disableFlag)
                  }
                }}, ctx.row.disableFlag==0?'禁用':'启用'),
              h('el-button',{
                props: {
                  type: 'text'
                },
                on: {
                  click(){
                     _this.excess(ctx.row.id,ctx.row.excessFlag)
                  }
                }}, ctx.row.excessFlag==0?'超量':'不超量'),
                 h('el-button',{
                props: {
                  type: 'text'
                },
                on: {
                  click(){
                     _this.delete(ctx.row.id)
                  }
                }}, '删除')
              
            ])
            
          }
        },{
          label: '编码',
          key: 'code',
          align: 'center',
          render:(h,ctx)=>{
            let _this = this;
            return h('el-button',{
              props: {
                type: 'text'
              },
              on: {
                click(){
                  _this.showView(ctx.row.id);
                }
              }
            },ctx.row.code);
          }
        },{
          label: '名称',
          key: 'name'
        },{
          label: '禁用标记',
          key: 'disableFlag',
          align: 'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.disableFlag,
                titles: [{status:0,title:'启用'},{status:1,title:'禁用'}]
            }});
          }
        },{
          label: '超量标记',
          key: 'excessFlag',
          align: 'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.excessFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});
          }
        },
        // {
        //   label: '正文字体',
        //   key: 'bodyFontSize'
        // },{
        //   label: '正文行高',
        //   key: 'bodyLineHeight'
        // },{
        //   label: '表格行高',
        //   key: 'tableLineHeight'
        // },
        {
          label: '合同里程碑',
          key: 'containMSFlag'
        }
       ]
      }
    },
    methods: {
        add(){
          this.editor.id = '';
          this.editor.sync = true;
          this.template.templateContent = '';
          this.template.id = '';
          this.template.name = '';
          this.template.elementList = [];
        },
        edit(id){
          let _this = this;
          this.axios.post(this.lib.config.host.contract+'/contractmgt/template/preView/'+id,{}).
          then(res=>{
            _this.template.templateContent = res.data.templateContent || '';
            _this.template.elementList = res.data.elementList || [];
            _this.template.name = res.data.name;
            _this.template.id = res.data.id;
            _this.editor.sync = true;
          }).
          catch(e=>{
            this.showMsg('error',e);
          });
        },
        save(){
          if(!this.template.name){
             this.showMsg('warning','请填写模板名称');
             return;
          }
          this.template = Object.assign(this.template,this.$refs.editor.getTemplate());
          let _this = this;
          this.axios.post(this.lib.config.host.contract+'/contractmgt/template/save',this.template).
          then(res=>{
            let result = res.data;
            if(result.success){
              _this.editor.sync = false;
              _this.$refs.tableExt.refreshTable();
            }else{
              _this.showMsg('error',result.message);
            }
          }).catch(e=>{
              _this.showMsg('error',e);
          });
        },
        showView(id){
          let _this = this;
          this.axios.post(this.lib.config.host.contract+'/contractmgt/template/preView/'+id,{}).
          then(res=>{
            _this.template = res.data;
            _this.viewer.sync = true;
          }).
          catch(e=>{
            this.showMsg('error',e);
          });
        },
        disableTemplate(id,disableFlag){
           let tip = disableFlag==0?'禁用':'启用';
           disableFlag = disableFlag==0?1:0;
                     this.$confirm('确定要'+tip+'该模板?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        this.axios.post(this.lib.config.host.contract+"/contractmgt/template/enable",{id:id,disableFlag:disableFlag}).
                        then((response)=>{
                          this.$refs['tableExt'].refreshTable();
                          this.$message({
                              type: 'success',
                              message: '操作成功!'
                          });
                        }).catch((error)=>{
                          this.$message({
                              type: 'error',
                              message: error
                          });
                        });
                      }).catch(() => {
                        
                      });
        },
        excess(id,excessFlag){
          let tip = excessFlag==0?'超量':'不超量';
          excessFlag = excessFlag==0?1:0;
          this.$confirm('确定要'+tip+'该模板?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.post(this.lib.config.host.contract+"/contractmgt/template/excess",{id:id,excessFlag:excessFlag}).
            then((response)=>{
              this.$refs['tableExt'].refreshTable();
              this.$message({
                  type: 'success',
                  message: '操作成功!'
              });
            }).catch((error)=>{
              this.$message({
                  type: 'error',
                  message: error
              });
            });
          }).catch(() => {
            
          });
        },
        delete(id){
            this.$confirm('确定要删除该模板?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.axios.post(this.lib.config.host.contract+"/contractmgt/template/delete",{id:id}).
              then((response)=>{
                this.$refs['tableExt'].refreshTable();
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
              }).catch((error)=>{
                this.$message({
                    type: 'error',
                    message: error
                });
              });
            }).catch(() => {
              
            });
        },
        editorClose(){
          this.editor.id = '';
          this.editor.sync = true;
          this.template.templateContent = '';
          this.template.id = '';
          this.template.name = '';
          this.template.elementList = [];
          this.editor.sync = false;

        },
        viewerClose(){
          this.template = {
          id: '',
          name: '',
          templateContent: '',
          elementList: []
        };
        this.viewer.sync = false;
        }
    }
  }
</script>
<style>


</style>
